<template>
  <div class="index-wrap">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="18" :xl="18" :lg="18">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :xl="8" :lg="8">
            <div class="medical-item medical-left-top">
              <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
              <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
              <div class="medical-header">
                <div class="medical-title">年就诊老人数量统计</div>
                <el-date-picker
                  v-model="year1"
                  type="month"
                  :editable="false"
                  placeholder="选择年月"
                  class="fr"
                  size="mini"
                  value-format="yyyy-MM"
                  @change="handleChange"
                ></el-date-picker>
              </div>
              <div class="medical-chart1">
                <v-chart
                  ref="chart1"
                  autoresize
                  :option="chart1"
                  style="width: 100%; height: 100%"
                />
                <ul class="medical-chart1-xline">
                  <li>疾病治疗</li>
                  <li>慢性病</li>
                  <li>康复训练</li>
                  <li>心理慰藉</li>
                  <li>安宁服务</li>
                </ul>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="16" :xl="16" :lg="16">
            <div class="medical-item medical-left-top">
              <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
              <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
              <div class="medical-header">
                <div class="medical-title">年疾病治疗人数统计</div>
                <el-date-picker
                  v-model="year1"
                  type="month"
                  :editable="false"
                  placeholder="选择年月"
                  class="fr"
                  value-format="yyyy-MM"
                  @change="handleChange"
                ></el-date-picker>
              </div>
              <div class="medical-chart1">
                <v-chart
                  autoresize
                  :option="chart2"
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
          </el-col>
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :xl="12" :lg="12">
            <div class="medical-item medical-left-top">
              <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
              <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
              <div class="medical-header">
                <div class="medical-title">年康复训练人数和次数统计</div>
                <el-date-picker
                  v-model="year1"
                  type="month"
                  :editable="false"
                  placeholder="选择年月"
                  class="fr"
                  value-format="yyyy-MM"
                  @change="handleChange"
                ></el-date-picker>
              </div>
              <div class="medical-chart1">
                <v-chart
                  autoresize
                  :option="chart4"
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
          </el-col>
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :xl="12" :lg="12">
            <div class="medical-item medical-left-top">
              <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
              <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
              <div class="medical-header">
                <div class="medical-title">年慢性病人数统计</div>
                <el-date-picker
                  v-model="year1"
                  type="month"
                  :editable="false"
                  placeholder="选择年月"
                  class="fr"
                  value-format="yyyy-MM"
                  @change="handleChange"
                ></el-date-picker>
              </div>
              <div class="medical-chart1">
                <v-chart
                  autoresize
                  :option="chart3"
                  style="width: 100%; height: 100%;"
                />
              </div>
            </div>
          </el-col>
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="24" :xl="24" :lg="24">
              <div class="medical-item medical-left-top">
                <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
                <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
                <div class="medical-header">
                  <div class="medical-title">心理慰籍人次</div>
                  <el-date-picker
                    v-model="year1"
                    type="month"
                    :editable="false"
                    placeholder="选择年月"
                    class="fr"
                    value-format="yyyy-MM"
                    @change="handleChange"
                  ></el-date-picker>
                </div>
                <div class="medical-chart2">
                  <div class="medical-bot-item">
                    <v-chart
                      autoresize
                      :option="chartbot1"
                      style="width: 186px; height: 186px;"
                    />
                    <div class="medical-bot-title">感情辅导</div>
                  </div>
                  <div class="medical-bot-item">
                    <v-chart
                      autoresize
                      :option="chartbot2"
                      style="width: 186px; height: 186px;"
                    />
                    <div class="medical-bot-title">心理咨询</div>
                  </div>
                  <div class="medical-bot-item">
                    <v-chart
                      autoresize
                      :option="chartbot3"
                      style="width: 186px; height: 186px;"
                    />
                    <div class="medical-bot-title">亲人牵挂</div>
                  </div>
                  <div class="medical-bot-item">
                    <v-chart
                      autoresize
                      :option="chartbot4"
                      style="width: 186px; height: 186px;"
                    />
                    <div class="medical-bot-title">故乡情结</div>
                  </div>

                </div>
              </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-right-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">安宁服务人次</div>
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div>
          <div class="medical-chart1 medical-right-wrap">
            <div class="medical-right-chart">
              <div class="medical-right-chart-item">
                <v-chart
                  autoresize
                  :option="chartright1"
                  style="width: 235px; height: 235px;"
                />
              </div>
              <div class="medical-right-title">临终关怀</div>
            </div>
            <!-- <div class="medical-right-chart">
              <div class="medical-right-chart-item">
                <v-chart
                  autoresize
                  :option="chartright2"
                  style="width: 235px; height: 235px;"
                />
              </div>
              <div class="medical-right-title">死亡恐惧</div>
            </div> -->
            <div class="medical-right-chart">
              <div class="medical-right-chart-item">
                <v-chart
                  autoresize
                  :option="chartright3"
                  style="width: 235px; height: 235px;"
                />
              </div>
              <div class="medical-right-title">精神慰籍</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  // import VabChart from "@/plugins/echarts";
  import VChart from 'vue-echarts'
  import { use } from "echarts/core";
  import { CanvasRenderer } from "echarts/renderers";
  import { PieChart } from "echarts/charts";
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from "echarts/components";
  import { getMedicineData } from "@/api/diseaseApi";
  use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
  ]);
  export default {
    name: "Index",
    components: {
      VChart,
    },
    data() {
      return {
        year1: "2021-10",
        chart1: {
          grid: {
              top: '8%',
              left: '0',
              right: '8%',
              bottom: '0',
              containLabel: true
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.name +":"+params.value+"人";
            }
          },
          xAxis: {
            type: 'value',
            axisLine: {
              show: false, //隐藏X轴轴线
            },
            splitLine: {
            	show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: false,
            },
          },
          yAxis: [
            {
              type: 'category',
              data: ["疾病治疗", "慢性病", "康复训练", "心理慰藉", "安宁服务"],
              axisLine: {
              	show: false,
              },
              axisLabel: {
                show: false,
              	textStyle: {
              			color: '#226CA3',
                    fontSize: 13
              	}
              },
              inverse: true,
              splitLine: {
              	show: false
              },
              axisTick:{
              	show: false
              },
            }
          ],
          color: ["#01D6FD", "#18BDFB", "#6F3CF8", "#DF1AA2", '#01D6FD'],
          series: [
            {
              name: "次数",
              type: "bar",
              barWidth: 8,
              z: 10,
              zlevel: 0,
              itemStyle: {
                color: function(params) {
                  // 给出颜色组
                  if(params.dataIndex == 0) {
                    return new echarts.graphic.LinearGradient(
                    		0, 0, 1, 0,
                    		[
                            {offset: 0, color: '#102140'},
                    				{offset: 0.3, color: '#0C75FD'},
                    				{offset: 0.6, color: '#01D6FD'},
                    				{offset: 1, color: '#01D6FD'}
                    		]
                    )
                  } else if(params.dataIndex == 1) {
                    return new echarts.graphic.LinearGradient(
                    		0, 0, 1, 0,
                    		[
                            {offset: 0, color: '#122040'},
                    				{offset: 0.3, color: '#4F56F4'},
                    				{offset: 0.6, color: '#338EFA'},
                    				{offset: 1, color: '#0DD1FB'}
                    		]
                    )
                  } else if(params.dataIndex == 2) {
                    return new echarts.graphic.LinearGradient(
                    		0, 0, 1, 0,
                    		[
                            {offset: 0, color: '#151F40'},
                    				{offset: 0.3, color: '#C625D8'},
                    				{offset: 0.6, color: '#8E34EC'},
                    				{offset: 1, color: '#663EFB'}
                    		]
                    )
                  } else if(params.dataIndex == 3) {
                    return new echarts.graphic.LinearGradient(
                    		0, 0, 1, 0,
                    		[
                            {offset: 0, color: '#111F3D'},
                            {offset: 0.3, color: '#663EFB'},
                            {offset: 0.6, color: '#8734E2'},
                    				{offset: 1, color: '#EA179A'},
                    		]
                    )
                  } else if(params.dataIndex == 4) {
                    return new echarts.graphic.LinearGradient(
                    		0, 0, 1, 0,
                    		[
                    				{offset: 0, color: '#122040'},
                    				{offset: 0.3, color: '#4F56F4'},
                    				{offset: 0.6, color: '#338EFA'},
                    				{offset: 1, color: '#0DD1FB'}
                    		]
                    )
                  }
                },
              },
              label: {
              		show: true,
              		// color: function(params) {
                //     console.log(params)
                //     if(params.dataIndex == 0) {
                //       return "#01D6FD"
                //     } else if(params.dataIndex == 1) {
                //       return "#18BDFB"
                //     } else if(params.dataIndex == 2) {
                //       return "#6F3CF8"
                //     } else if(params.dataIndex == 3) {
                //       return "#DF1AA2"
                //     } else if(params.dataIndex == 4) {
                //       return "#01D6FD"
                //     }
                //   },
                  color: "#01D6FD",
              		fontSize: 16,
              		position: 'right',
                  fontWeight: 'bold',
                  distance: 30,
                  formatter: function(obj) {
                  	if(obj.data == '0') {
                  		return 0
                  	} else {
                  		return obj.data + "人"
                  	}
                  }
              },
              data: [],
            },
            {
            	// 分隔
            	type: "pictorialBar",
              tooltip: {
                trigger: "item",
                formatter: function(params){
                	return params.name +":"+params.value+"人";
                }
              },
              itemStyle: {
                normal: {
                  color: function(params) {
                    if(params.dataIndex == 0) {
                      return "#01D6FD"
                    } else if(params.dataIndex == 1) {
                      return "#18BDFB"
                    } else if(params.dataIndex == 2) {
                      return "#6F3CF8"
                    } else if(params.dataIndex == 3) {
                      return "#DF1AA2"
                    } else if(params.dataIndex == 4) {
                      return "#01D6FD"
                    }
                  }
                }
              },
              data: [
                {
                  name: "疾病治疗",
                },
                {
                  name: "慢性病",
                },
                {
                  name: "康复训练",
                },
                {
                  name: "心理慰藉",
                },
                {
                  name: "安宁服务",
                }
              ],
              symbolRepeat: false,
            	// symbolRepeat: "fixed",
              symbolSize: 16,
            	symbol: "circle",
            	symbolClip: false,
            	symbolPosition: "end",
              symbolOffset: [8, 0],
            	z: 0,
            	zlevel: 1,
            },
            {
            	// 分隔
            	type: "pictorialBar",
              tooltip: {
                trigger: "item",
                formatter: function(params){
                	return params.name +":"+params.value+"人";
                }
              },
              data: [
                {
                  name: "疾病治疗",
                  itemStyle: {
                    normal: {
                      color: "#01d6fd4d",
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: '#01D6FD',
                    }
                  },
                },
                {
                  name: "慢性病",
                  itemStyle: {
                    normal: {
                      color: "#18bdfb4d",
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: '#18BDFB',
                    }
                  },
                },
                {
                  name: "康复训练",
                  itemStyle: {
                    normal: {
                      color: "#6f3cf84d",
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: '#6F3CF8',
                    }
                  },
                },
                {
                  name: "心理慰藉",
                  itemStyle: {
                    normal: {
                      color: "#df1aa24d",
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: '#DF1AA2',
                    }
                  },
                },
                {
                  name: "安宁服务",
                  itemStyle: {
                    normal: {
                      color: "#01d6fd4d",
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: '#01D6FD',
                    }
                  },
                },
              ],
              symbolRepeat: false,
            	// symbolRepeat: "fixed",
              symbolSize: 26,
            	symbol: "circle",
            	symbolClip: false,
            	symbolPosition: "end",
              symbolOffset: [13, 0],
            	z: 0,
            	zlevel: 2,
            }
          ],
        },
        chart2: {
          color: ['#0B7AFD'],
          grid: {
            top: "20%",
            bottom: "13%",
            left: "3%",
            right: "0",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: 'cross',
              label: {
                color: "#ffffff",
                borderColor: "#0B7AFD",
                shadowColor: "#0B7AFD",
                backgroundColor: '#0B7AFD'
              },
            },
          },
          xAxis: {
            data: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#226CA3',
                fontWeight: "bold",
                fontSize: 13
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              nameGap: 25,
              nameTextStyle: {
              	color: '#226CA3',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                		color: '#226CA3',
                		fontSize: 14,
                    fontWeight: "bold"
                }
              },
            },
          ],
          series: [
            {
                name: '人',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                  width: 5,
                  shadowBlur: 10,
                  shadowColor: '#062B55',
                  shadowOffsetY: 0,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: '#0997FD'
                    },
                    {
                      offset: 0.2,
                      color: '#07C2FC'
                    },
                    {
                      offset: 0.4,
                      color: '#0B80FD'
                    },
                    {
                      offset: 0.6,
                      color: '#0B80FD'
                    },
                    {
                      offset: 0.8,
                      color: '#0999FD'
                    },
                    {
                      offset: 1,
                      color: '#0A8AFD'
                    },
                  ])
                },
                showSymbol: false,
                areaStyle: {
                  opacity: 0.8,
                  //右，下，左，上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#07C5FC'
                    },
                    {
                      offset: 0.5,
                      color: '#0D5B8A'
                    },
                    {
                      offset: 1,
                      color: '#0E2757'
                    },
                  ])
                },
                emphasis: {
                  focus: 'series'
                },
              data: [10, 52, 200, 334, 390, 330, 220, 200, 334, 555, 366, 412],
            },
          ],
        },
        chart3: {
          color: ['#0B7AFD'],
          grid: {
            top: "20%",
            bottom: "13%",
            left: "4%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: 'cross',
              label: {
                color: "#ffffff",
                borderColor: "#0B7AFD",
                shadowColor: "#0B7AFD",
                backgroundColor: '#0B7AFD'
              },
            },
          },
          xAxis: {
            data: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#226CA3',
                fontSize: 12
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              nameGap: 25,
              nameTextStyle: {
              	color: '#226CA3',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                		color: '#226CA3',
                		fontSize: 14,
                    fontWeight: "bold"
                }
              },
            },
          ],
          series: [
            {
              name: "人",
              type: "bar",
              data: [],
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new echarts.graphic.LinearGradient(
                  		0, 0, 0, 1,
                  		[
                  				{offset: 0, color: '#01B1FF'},
                  				{offset: 1, color: '#035CFF'}
                  		]
                  ),
                }
              },
            },
          ],
        },
        chart4: {
          color: ['#0B7AFD'],
          grid: {
            top: "20%",
            bottom: "13%",
            left: "4%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: 'cross',
              label: {
                color: "#ffffff",
                borderColor: "#0B7AFD",
                shadowColor: "#0B7AFD",
                backgroundColor: '#0B7AFD'
              },
            },
          },
          xAxis: {
            data: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#226CA3',
                fontSize: 12
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              nameGap: 25,
              nameTextStyle: {
              	color: '#226CA3',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                		color: '#226CA3',
                		fontSize: 14,
                    fontWeight: "bold"
                }
              },
            },
          ],
          series: [
            {
              name: "人数",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  shadowColor: '#9A41F2',
                  // shadowBlur: 10,
                  shadowOffsetY: -10,
                  color: new echarts.graphic.LinearGradient(
                  		0, 0, 0, 1,
                  		[
                  				{offset: 0, color: '#01B1FF'},
                  				{offset: 1, color: '#035CFF'}
                  		]
                  ),
                }
              },
              stack: "康复训练",
              data: [],
            },
            {
              name: "次数",
              type: "bar",
              barWidth: 10,
              // barGap: '-100%',
              itemStyle: {
                normal: {
                  barBorderRadius: [5,5,0,0],
                  color: new echarts.graphic.LinearGradient(
                  		0, 0, 0, 1,
                  		[
                  				{offset: 0, color: '#EA179A'},
                  				{offset: 1, color: '#9A41F2'}
                  		]
                  ),
                }
              },
              stack: "康复训练",
              data: [],
            },
          ],
        },
        chartbot1: {
          series: [
            {
              type: 'gauge',
              progress: {
                roundCap: true,
                show: true,
                width: 10,
                itemStyle: {
                  //右，下，左，上
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: '#04FAFC'
                    },
                    {
                      offset: 0.2,
                      color: '#099CFD'
                    },
                    {
                      offset: 0.4,
                      color: '#0B80FD'
                    },
                    {
                      offset: 1,
                      color: '#07CAFC'
                    }
                  ])
                }
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 10,
                  color: [[1, '#203079']]
                }
              },
              axisTick: {
                distance: -25,
                splitNumber: 5,
                lineStyle: {
                  width: 1,
                  color: '#246FDB'
                }
              },
              splitLine: {
                distance: -30,
                length: 10,
                lineStyle: {
                  width: 2,
                  color: '#4D7DDF'
                }
              },
              axisLabel: {
                show: false
              },
              pointer: {
                width: 6,
                offsetCenter: [0, -5],
                length: '60%',
                itemStyle: {
                  color: '#1ABEFF',
                }
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 16,
                itemStyle: {
                  borderWidth: 10,
                  borderColor: '#04fafc80',
                  color: '#04FAFC'
                }
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                fontSize: 20,
                formatter: '{value}',
                color: '#04F8FC',
                offsetCenter: [0, '90%']
              },
              data: []
            }
          ],
        },
        chartbot2: {
          series: [
            {
              type: 'gauge',
              progress: {
                roundCap: true,
                show: true,
                width: 10,
                itemStyle: {
                  //右，下，左，上
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: '#5C47F9'
                    },
                    {
                      offset: 0.2,
                      color: '#3688FA'
                    },
                    {
                      offset: 0.4,
                      color: '#0DD1FB'
                    },
                    {
                      offset: 1,
                      color: '#476BFA'
                    }
                  ])
                }
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 10,
                  color: [[1, '#203079']]
                }
              },
              axisTick: {
                distance: -25,
                splitNumber: 5,
                lineStyle: {
                  width: 1,
                  color: '#3B62DC'
                }
              },
              splitLine: {
                distance: -30,
                length: 10,
                lineStyle: {
                  width: 2,
                  color: '#4354DB'
                }
              },
              axisLabel: {
                show: false
              },
              pointer: {
                width: 6,
                offsetCenter: [0, -5],
                length: '60%',
                itemStyle: {
                  color: '#4FCBFF',
                }
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 16,
                itemStyle: {
                  borderWidth: 10,
                  borderColor: '#5b48f980',
                  color: '#5B48F9'
                }
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                fontSize: 20,
                formatter: '{value}',
                color: '#12C8FB',
                offsetCenter: [0, '90%']
              },
              data: []
            }
          ],
        },
        chartbot3: {
          series: [
            {
              type: 'gauge',
              progress: {
                roundCap: true,
                show: true,
                width: 10,
                itemStyle: {
                  //右，下，左，上
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: '#1CBCFF'
                    },
                    {
                      offset: 0.2,
                      color: '#4C8CFF'
                    },
                    {
                      offset: 0.4,
                      color: '#A731FF'
                    },
                    {
                      offset: 1,
                      color: '#BF19FF'
                    }
                  ])
                }
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 10,
                  color: [[1, '#203079']]
                }
              },
              axisTick: {
                distance: -25,
                splitNumber: 5,
                lineStyle: {
                  width: 1,
                  color: '#8721CD'
                }
              },
              splitLine: {
                distance: -30,
                length: 10,
                lineStyle: {
                  width: 2,
                  color: '#A01AE0'
                }
              },
              axisLabel: {
                show: false
              },
              pointer: {
                width: 6,
                offsetCenter: [0, -5],
                length: '60%',
                itemStyle: {
                  color: '#D76EFF',
                }
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 16,
                itemStyle: {
                  borderWidth: 10,
                  borderColor: '#bf19ff80',
                  color: '#BF19FF'
                }
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                fontSize: 20,
                formatter: '{value}',
                color: '#BF19FF',
                offsetCenter: [0, '90%']
              },
              data: []
            }
          ],
        },
        chartbot4: {
          series: [
            {
              type: 'gauge',
              progress: {
                roundCap: true,
                show: true,
                width: 10,
                itemStyle: {
                  //右，下，左，上
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: '#9630D8'
                    },
                    {
                      offset: 0.2,
                      color: '#8834E2'
                    },
                    {
                      offset: 0.4,
                      color: '#C721B4'
                    },
                    {
                      offset: 1,
                      color: '#E9179B'
                    }
                  ])
                }
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 10,
                  color: [[1, '#203079']]
                }
              },
              axisTick: {
                distance: -25,
                splitNumber: 5,
                lineStyle: {
                  width: 1,
                  color: '#952CBB'
                }
              },
              splitLine: {
                distance: -30,
                length: 10,
                lineStyle: {
                  width: 2,
                  color: '#AF1D97'
                }
              },
              axisLabel: {
                show: false
              },
              pointer: {
                width: 6,
                offsetCenter: [0, -5],
                length: '60%',
                itemStyle: {
                  color: '#E6189D',
                }
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 16,
                itemStyle: {
                  borderWidth: 10,
                  borderColor: '#ea179a80',
                  color: '#EA179A'
                }
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                fontSize: 20,
                formatter: '{value}',
                color: '#E9179B',
                offsetCenter: [0, '90%']
              },
              data: []
            }
          ],
        },
        chartright1: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#01D6FD", "#34415A"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [80, 88],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#01D6FD",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
                    show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        chartright2: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#DF1AA2", "#34415A"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [80, 88],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#DF1AA2",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
            					show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        chartright3: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#6F3CF8", "#344059"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [80, 88],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#6F3CF8",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
            					show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        elder4: {},
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      var date = new Date() // 获取时间
      var year = date.getFullYear() // 获取年
      var month = date.getMonth() + 1 // 获取月
      this.year1 = year + '-' + month
      this.getMedicineData({time: '2021-10'});
    },
    methods: {
      handleChange(value) {
        var date = new Date() // 获取时间
        var year = date.getFullYear() // 获取年
        var month = date.getMonth() + 1 // 获取月
        var year1 = year + '-' + month
        if (value == year1) {
          this.getMedicineData({time: '2021-10'})
        } else {
          this.getMedicineData({time: value})
        }
        
      },
      handleCommand(command) {
        this.$message("click on item " + command);
      },
      getMedicineData(data) {
        getMedicineData('get', data).then((resp) => {
          if (resp.code === 200) {
            let data = resp.data;
            let elder = data.ill;
            let ill = [];
            for (const key in elder) {
              if (elder.hasOwnProperty(key)) {
                const element = elder[key];
                ill.push(element);
              }
            }
            this.chart1.series[0].data = ill;

            ill.forEach((item,index)=>{
              this.chart1.series[1].data[index].value = item;
              this.chart1.series[2].data[index].value = item;
            })

            let elder1 = data.ill1;
            let ill1 = [];
            let ill1xAxisData = [];
            for (const key in elder1) {
              if (elder1.hasOwnProperty(key)) {
                const element = elder1[key];
                ill1.push(element);
                ill1xAxisData.push(key);
              }
            }
            this.chart2.series[0].data = ill1;
            this.chart2.xAxis.data = ill1xAxisData;

            let elder2 = data.ill2;
            let ill2 = [];
            let ill2xAxisData = [];
            for (const key in elder2) {
              if (elder2.hasOwnProperty(key)) {
                const element = elder2[key];
                ill2.push(element);
                ill2xAxisData.push(key);
              }
            }
            this.chart3.series[0].data = ill2;
            this.chart3.xAxis.data = ill2xAxisData;

            let elder3 = data.ill3.elder;
            let elder3_num = data.ill3.num;
            let ill3 = [];
            let ill3_num = [];
            let ill3xAxisData = [];
            for (const key in elder3) {
              if (elder3.hasOwnProperty(key)) {
                const element = elder3[key];
                ill3.push(element);
                ill3xAxisData.push(key);
              }
            }
            for (const key in elder3_num) {
              if (elder3.hasOwnProperty(key)) {
                const element = elder3_num[key];
                ill3_num.push(element);
              }
            }

            this.chart4.series[0].data = ill3;
            this.chart4.series[1].data = ill3_num;
            this.chart4.xAxis.data = ill3xAxisData;

            let elder5 = data.ill5;
            let elder5_step1 = [];
            let elder5_step2 = [];
            let elder5_step3 = [];
            for (const key in elder5) {
              if (elder5.hasOwnProperty(key)) {
                const element = elder5[key];
                if(key == '临终关怀') {
                  let value1 = 0;
                  elder5_step1.push({
                    name: key,
                    value: elder5[key]
                  })
                  for(let i in elder5) {
                  	if(i != '临终关怀') {
                  		value1 += parseInt(elder5[i]);
                  	}
                  }
                  elder5_step1.push({
                  	value: value1,
                  	name: '其余类型'
                  })
                } else if(key == '死亡恐惧') {
                  let value2 = 0;
                  elder5_step2.push({
                    name: key,
                    value: elder5[key]
                  })
                  for(let i in elder5) {
                  	if(i != '死亡恐惧') {
                  		value2 += parseInt(elder5[i]);
                  	}
                  }
                  elder5_step2.push({
                  	value: value2,
                  	name: '其余类型'
                  })
                } else if(key == '精神慰藉') {
                  let value3 = 0;
                  elder5_step3.push({
                    name: key,
                    value: elder5[key]
                  })
                  for(let i in elder5) {
                  	if(i != '精神慰藉') {
                  		value3 += parseInt(elder5[i]);
                  	}
                  }
                  elder5_step3.push({
                  	value: value3,
                  	name: '其余类型'
                  })
                }
              }
            }

            this.chartright1.series[0].data = elder5_step1;
            this.chartright2.series[0].data = elder5_step2;
            this.chartright3.series[0].data = elder5_step3;

            this.$set(this.chartbot1.series[0].data, 0, data.ill4["感情辅导"])
            this.$set(this.chartbot2.series[0].data, 0, data.ill4["心理咨询"])
            this.$set(this.chartbot3.series[0].data, 0, data.ill4["亲人牵挂"])
            this.$set(this.chartbot4.series[0].data, 0, data.ill4["故乡情结"])
            this.$set(this.chartbot1.series[0], 'max', data.ill4["感情辅导"] + 30)
            this.$set(this.chartbot2.series[0], 'max', data.ill4["心理咨询"] + 30)
            this.$set(this.chartbot3.series[0], 'max', data.ill4["亲人牵挂"] + 30)
            this.$set(this.chartbot4.series[0], 'max', data.ill4["故乡情结"] + 30)
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  @keyframes rotate {
  	    from {
  	        transform: rotate(0deg);
  	    }
  	    to {
  	        transform: rotate(360deg);
  	    }
  	}
    .fr{
        width: 117px;
        position: absolute;
        right: 23px;
        background: transparent;
        ::v-deep{
          .el-input__inner{
            border-color: #334973;
            background: transparent;
            color: #fff;
          }
          .el-input__prefix{
                font-size: 20px;
                color: #5391d9;
          }
        }
    }
  .index-wrap {
    min-height: calc( 100vh - 65px) !important;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: url(../../assets/medical/bg.png) no-repeat;
    background-size: cover;
    .medical-left-top{
      height: 348px;
    }
    .medical-right-top{
      height: 1092px;
      .medical-chart1{
        height: 1056px;
      }
    }
    .medical-right-wrap{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .medical-right-chart-item{
        width: 235px;
        height: 235px;
        position: relative;
        &::before{
          content: "";
          display: block;
          position: absolute;
          box-sizing: border-box;
          left: 0;
          top: 0;
          width: 235px;
          height: 235px;
          border-radius: 50%;
          border: 14px dashed #344059;
          animation: rotate 30s infinite;
        }
      }
      .medical-right-title{
        font-size: 18px;
        color: #FFFFFF;
        text-align: center;
        margin-top: 26px;
      }
    }
    .medical-chart2{
      width: 100%;
      height: 300px;
      padding: 0 22px 8px 23px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .medical-bot-title{
        text-align: center;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 60px;
      }
    }
    .medical-chart1{
      width: 100%;
      height: 300px;
      padding: 0 22px 8px 23px;
      box-sizing: border-box;
      margin-top: 10px;
    }
    .medical-chart1-xline{
      position: absolute;
      top: 72px;
      left: 23px;
      font-size: 13px;
      color: #226CA3;
      line-height: 12px;
      font-weight: bold;
    }
    .medical-chart1-xline li:nth-child(n+2){
      margin-top: 42px;
    }
    .medical-item{
      width: 100%;
      border: 2px solid #394E75;
      border-radius: 10px 0px 0 10px;
      position: relative;
      background: rgba(36, 57, 96, 0.13);
      box-shadow: inset 0 0 19px rgb(26 61 122);
      .medical-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 23px 20px 0 23px;
        height: 40px;
        box-sizing: border-box;
        .medical-title{
          position: absolute;
          font-size: 20px;
          color: #ffffff;
          font-weight: bold;
          padding-left: 20px;
          line-height: 20px;
          &::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 11px;
            height: 20px;
            background-color: #009CFF;
          }
        }
      }
      &::before{
        content: "";
        display: block;
        position: absolute;
        right: -2px;
        top: -2px;
        width: 0;
        height: 0;
        border-top: 7px solid #4DBECE;
        border-left: 7px solid transparent;
        z-index: 1;
      }
      &::after{
        content: "";
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 0;
        height: 0;
        border-bottom: 17px solid #4DBECE;
        border-left: 17px solid transparent;
      }
      .medical-top{
        width: 71px;
        height: 65px;
        position: absolute;
        left: -2px;
        top: -4px;
        z-index: 1;
				object-fit: inherit;
      }
      .medical-bot{
        width: 71px;
        position: absolute;
        left: -2px;
        bottom: -4px;
        z-index: 1;
      }
    }
  }
</style>
